<template>
  <!--查看详情-->
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="modalTitle"
    @ok="handleOk"
    :destroyOnClose="true"
    :defaultFullscreen="true"
    :canFullscreen="false"
    :footer="null"
  >
    <BasicForm @register="registerForm" />
    <BasicTable @register="registerTable" v-if="showTable" />
  </BasicModal>
</template>

<script setup>
  import { BasicTable } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { modalList, getModalColumn } from './service';
  import { useListPage } from '/@/hooks/system/useListPage';

  const emit = defineEmits(['success', 'register']);
  let modalTitle = ref('班组考核明细');
  let showTable = ref(false);
  let userInfo = ref({});

  // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
  const [register, { closeModal = () => {}, setModalProps = () => {} }] = useModalInner((data) => {
    showTable.value = true;
    userInfo.value = data.record;
    setFieldsValue(userInfo.value);
    let scoreField = data.dataIndex; //当前点进来的字段

    let params = {
      caseCode: userInfo.value.caseCode,
      orgCode: userInfo.value.orgCode,
      periodCode: userInfo.value.periodCode,
      psnNum: userInfo.value.psnNum,
      scoreField: scoreField,
    };
    console.log(params);
    //查询动态表头
    getModalColumn(params).then((res) => {
      let newColumn = [...columns];
      res.detailTableHeaders.forEach((r) => {
        newColumn.push({
          title: r.tableName,
          dataIndex: r.tableCode,
          width: 100,
          align: 'center',
        });
      });

      //重设表头
      nextTick(() => {
        showTable.value = true;
        setColumns(newColumn);
        // 调用接口自定义参数
        reload({ searchInfo: params });
      });
    });
  });

  let columns = [
    {
      title: 'id',
      dataIndex: 'id',
      width: 80,
      ifShow: false,
    },
  ];
  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    designScope: 'user-list',
    spinning: () => (spinning.value = !spinning.value),
    tableProps: {
      api: modalList,
      columns: columns,
      immediate: false, //是否立即请求数据 默认true
      size: 'small',
      showActionColumn: false,
      useSearchForm: false, //是否显示查询条件面板 默认true
      rowKey: 'id',
      pagination: false,
    },
  });

  let pepForm = [
    {
      label: '员工姓名',
      field: 'psnName',
      component: 'Input',
      dynamicDisabled: () => true,
      colProps: { span: 12 },
    },
    {
      label: '员工工号',
      field: 'psnNum',
      component: 'Input',
      dynamicDisabled: () => true,
      colProps: { span: 12 },
    },
    {
      label: '班组名称',
      field: 'orgName',
      component: 'Input',
      dynamicDisabled: () => true,
      colProps: { span: 12 },
    },
    {
      label: '岗位名称',
      field: 'posName',
      component: 'Input',
      dynamicDisabled: () => true,
      colProps: { span: 12 },
    },
  ];

  const [registerTable, { reload = () => {}, setColumns = () => {} }] = tableContext;

  //表单配置
  const [registerForm, { setFieldsValue = () => {}, updateSchema = () => {} }] = useForm({
    schemas: pepForm,
    showActionButtonGroup: false,
  });

  /**
   * 弹窗保存
   */
  async function handleOk() {
    try {
      setModalProps({ confirmLoading: true });
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<style lang="less">
  .performanceForm {
    .ant-input-number {
      width: 50%;
    }
    .ant-picker {
      width: 50%;
    }
  }
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #5c5b5b;
  }
  .staff-info-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
  }
</style>
